<template>
    <div class="container">
        <div class="btn">
            <BtnGroup
                    :single="single"
                    :multiple="multiple"
                    @add="handleAdd"
                    @update="handleUpdate"
                    @delete="handleDelete"
                    @import="handleImport"
                    @export="handleExport"
            />
        </div>
        <el-table
                class="table"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="日期"
                    width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

    import BtnGroup from "../components/BtnGroup";
    export default {
        components: {
            BtnGroup
        },
        data() {
            return {
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                tableData: [{
                    id: '1',
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '2',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '3',
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '4',
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '5',
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '6',
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '7',
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            }
        },
        methods: {
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id);
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
            handleAdd() {
                this.$notify({
                    title: '添加操作',
                    message: '表单置空操作',
                    type: 'success'
                });
            },
            handleUpdate(row) {
                console.log(this.ids)
                this.$notify({
                    title: '修改操作',
                    message: '选中的 id 为' + this.ids,
                    type: 'success'
                });
            },
            handleDelete(row) {
                console.log(this.ids)
                const creditIds = this.ids;
                this.$confirm('是否确认删除选中的 ' + this.ids.length + ' 条数据吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    // 删除操作
                }).then(() => {
                    // 刷新列表数据
                    this.$notify({
                        title: '删除成功',
                        message: '这是一条成功的提示消息',
                        type: 'success'
                    });
                }).catch(function() {});
            },
            handleImport(row) {
                console.log('导入')
            },
            handleExport(row) {
                console.log('导出')
                console.log(this.ids)
            }
        }
    }
</script>

<style scoped>
    .container {
        padding: 30px 30px;
    }
    .btn {
        padding: 10px 10px 10px 30px;
    }
    .table {
        padding: 30px 30px;
    }
</style>